<template>
  <div>
    <van-nav-bar title="登录/注册" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit" class="login_form">
      <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
      <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
      <van-field v-model="phone" name="手机号" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
      <van-field v-model="email" name="邮箱" label="邮箱" placeholder="邮箱" :rules="[{ required: true, message: '请填写邮箱' }]" />
      <div style="margin: 16px;">
        <van-button v-if="checkbox==false" disabled round block type="info" native-type="submit">立即注册</van-button>
        <van-button v-else round block type="info" native-type="submit" @click="handle">立即注册</van-button>
      </div>

    </van-form>
    <input type="checkbox" v-model="checkbox" class="xieyi_checkbox">
    <span class="xieyi">我已阅读并同意用户协议和隐私条款</span>
    <div class="login_others">
      <div class="login_others2">
        <div>
          <router-link to="/weixin">
            <img v-if="checkbox==false" src="/wode_images/login/weixin1.png">
            <img v-else src="/wode_images/login/weixin2.png">
          </router-link>
        </div>
        <div>
          <router-link to="/qq">
            <img v-if="checkbox==false" src="/wode_images/login/qq1.png">
            <img v-else src="/wode_images/login/qq2.png">
          </router-link>
        </div>
        <div>
          <router-link to="/weibo">
            <img v-if="checkbox==false" src="/wode_images/login/weibo1.png">
            <img v-else src="/wode_images/login/weibo2.png">
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      checkbox: false,
      username: "",
      password: "",
      phone: "",
      email: ""
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    onClickLeft() {
      this.$router.push("/wode");
    },
    handle() {
      let object = {
        username: this.username,
        password: this.password,
        phone: this.phone,
        email: this.email
      };
      if (
        this.username != "" &&
        this.password != "" &&
        this.phone != "" &&
        this.email != ""
      ) {
        //将用户名和密码发送到WEB服务器
        this.axios.post("/register", this.qs.stringify(object)).then(res => {
          if (res.data.code == 201) {
            //用户已经存在
            Toast.fail({
              message: "用户名已存在",
              position: "bottom"
            });
          }
          if (res.data.code == 200) {
            //用户注册成功
            Toast.success({
              message: "注册成功",
              position: "bottom"
            });
            window.setTimeout(() => {
              this.$router.push("/login");
            }, 1000);
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.login_form {
  margin-top: 10px;
}
.van-cell {
  height: 60px;
}
.van-button {
  font-size: 18px;
}
.xieyi_checkbox {
  margin-left: 10px;
}
.xieyi {
  font-size: 14px;
}
.login_others {
  position: fixed;
  bottom: 30px;
  width: 100%;
}
.login_others2 {
  display: flex;
  justify-content: space-around;
}
</style>

